<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游记标题</title>
    <link rel="stylesheet" href="sycss/b_floor.css">
    <link rel="stylesheet" href="sycss/Tou.css">
    <link rel="stylesheet" href="sycss/tool_bar.css">
    <link rel="stylesheet" href="sycss/travel_article.css">
    <link rel="stylesheet" href="sycss/traveldetails.css">
    <script src="js/vue.min.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script>
        $(function () {
            var userId =  $.cookie('userId');
            var head_pic = null;
            $("#top").mouseenter(function () {
                $("#top").parent().next().show();
            });
            $("#top").mouseleave(function () {
                $("#top").parent().next().hide();
            });
            $("#bot").mouseenter(function () {
                $("#bot").parent().next().show();
            });
            $("#bot").mouseleave(function () {
                $("#bot").parent().next().hide();
            });

            $(this).scroll(function () {
                var toTop = $(window).scrollTop();
                if(toTop>=605){
                    $(".m_prew_right").fadeIn();
                    $("#foot").fadeIn();
                }
                else{
                    $(".m_prew_right").fadeOut();
                    $("#foot").fadeOut();
                }
            });




            var indexId = sessionStorage.getItem("articleId");
            var content = null;
            if(indexId !=null){
                indexId = parseInt(indexId);
                ajax();
            }

            var vm = new Vue({
                el:"#app",
                data:{
                    users:[]
                }
            });
            function ajax() {
                $.ajax({
                    url:"/getArticleDetails",
                    type:"post",
                    data:{
                        articleId: indexId
                    },
                    dataType:"json",
                    success:function (data) {
                        vm.users.push({
                            userRickName:data.users.userRickname,
                            userPicaddress:data.users.userPicaddress,
                            articleTime:data.articleTime,
                            hot:data.hot,
                            articleTitle:data.articleTitle,
                        });

                        content =data.articleAddress;

                        $(".m_prew_left").html(content);
                        $(".btnList").hide();
                        $(".hoverBtn").hide();
                        $(".layui-textarea").attr("disabled",true);
                        $("span[title='check']").hide();
                        $(".s_edit_set").hide();
                        head_pic = data.articleImg;
                        head_pic = "url("+ head_pic + ")"+  " " + "no-repeat";
                        $(".banner_pic").css("background",head_pic);
                        $(".banner_pic").css("background-size","100% 100%");

                    }
                })
            }

            $("#foot a").click(function () {
                $(".dd").css("opacity","1");
            })

        })
    </script>
</head>
<body>
<div id="app">
    <!--顶部导航栏-->
    <div class="public_head">
        <div class="public_head_auto">
            <ul class="public_head_nav">
                <li class="logo"><a href="" target="_blank">
                    <img src="./images/logo_y.png" alt="">
                </a></li>
                <li><a href="sy-index.html">首页</a></li>
                <li><a href="community_my.html" id="shequ"  class="active" >社区</a></li>
                <li><a href="" id="quanzi" >圈子</a></li>
                <li><a href="" id="forum" >目的地</a></li>
                <li><a href="" id="wenda" >问答</a></li>
                <li><a href="YouJi-Z.html">攻略</a></li>
                <li><a href="video.html" >视频</a></li>
                <li><a href="" >领队</a></li>
                <li><a href="photo.html" >摄影</a></li>
                <li class="yaoyao_box">
                    <a class="yaoyao_a" href="javascript:;">旅游</a>
                    <div class="yaoyao_ul">
                        <a href="" target="_blank" class="yaoyao_li">周边游</a>
                        <a href="" target="_blank" class="yaoyao_li">国内游</a>
                        <a href="" target="_blank" class="yaoyao_li">出境游</a>
                        <a href="" target="_blank" class="yaoyao_li">当地玩乐</a>
                        <a href="" target="_blank" class="yaoyao_li">亲子游</a>
                        <a href="" target="_blank" class="yaoyao_li">户外游</a>
                        <a href="" target="_blank" class="yaoyao_li">定制游</a>
                        <a href="" target="_blank" class="yaoyao_li">活动赛事</a>
                    </div>
                </li>
                <input type="hidden" value="" id="yxklogin">
                <li style="float: right;"><a href="register.html">注册</a></li>
                <li style="float: right;"><a href="login.html">登录</a></li>
                <li class="xc_message right mouse_up">
                    <div class="xx"><i></i><span></span>消息 <span class="down"></span></div>
                    <!--                    <ul class=" mouse_wrapper">-->
                    <!--                        <li><a href="" target="_blank">订单消息</a></li>-->
                    <!--                        <li><a href="" target="_blank">互动消息</a></li>-->
                    <!--                        <li><a href="" target="_blank">系统通知</a></li>-->
                    <!--                        <li><a href="" target="_blank">私信</a></li>-->
                    <!--                    </ul>-->
                </li>
                <li class="userinfo right mouse_up">
                    <div class="xx">
                        <a href="" target="_blank">
                            <img src="https://img3.youxiake.com/static/images/defaultAvatar.png?imageMogr2/thumbnail/!220x220r/gravity/Center/crop/!220x220/quality/90" alt="">
                        </a>
                        <span class="down"></span>
                    </div>
                    <!--                    <ul class="userinfo_wrapper mouse_wrapper">-->
                    <!--                        <li class="color"><a href="" target="_blank">积分 1</a> / <a href="" target="_blank">游侠币 0.00</a></li>-->
                    <!--                        <li><span class="bg bg1"></span> <input type="hidden" value="11002928" id="yxkuid"> <a href="" target="_blank">我的等级</a></li>-->
                    <!--                        <li><span class="bg bg2"></span> <a href="" target="_blank">我的领地</a></li>-->
                    <!--                        <li><span class="bg bg3"></span> <a href="" target="_blank">我的订单</a></li>-->
                    <!--                        <li><span class="bg bg9"></span> <a href="" target="_blank">我的收藏</a></li>-->
                    <!--                        <li><span class="bg bg4"></span> <a href="" target="_blank">我的游记/攻略</a></li>-->
                    <!--                        <li><span class="bg bg5"></span> <a href="" target="_blank">我的草稿箱</a></li>-->
                    <!--                        <li><span class="bg bg6"></span> <a href="" target="_blank">摄影作品</a></li>-->
                    <!--                        <li><span class="bg bg7"></span> <a href="" target="_blank">个人设置</a></li>-->
                    <!--                        <li><span class="bg bg8"></span><a href="">退出登录</a></li>-->
                    <!--                    </ul>-->
                </li>

            </ul>
        </div>
    </div>
    <!--用户信息-->
    <div class="loadingBg">
        <div class="no_big_bg">
            <div class="banner_pic" style="height: 635px;" >
                <div class="titlebg"></div>
            </div>
            <div class="view_box" v-for="(User,index) in users">
                <div class="viewtitle">
                    <div class="auto-x">
                        <div class="user_pic">
                            <a href="">
                                <img :src=User.userPicaddress alt="">
                            </a>
                        </div>
                        <div class="title_h1">
                            <h1>
                                <span id="scrollobj">{{User.articleTitle}}</span>
                                <i class="dig_icon1"></i>
                            </h1>
                        </div>
                        <ul class="view_edit">
                            <li>
                                <i class="sr">
                                    <img src="./images/下载.png" alt="">
                                </i>
                                <span>收藏</span>
                            </li>
                            <li class="view_share">
                                <i class="fx">
                                    <img src="./images/下载%20(1).png" alt="">
                                </i>
                                <span>分享</span>
                            </li>
                        </ul>
                        <div class="user_info" >
                            <a href="" class="user_name">{{User.userRickName}}</a>
                            <a href="" class="user_grade">Lv.1 普陀山</a>
                            <span class="user_time">{{User.articleTime}}</span>
                            <span class="user_see">
                                <img src="./images/111.png" alt="">
                                {{User.hot}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--游记主体-->
    <div class="b_prew_main" >
        <!--主体文章-->
        <div class="m_prew_left" style="background-color: white;" >

        </div>
        <!--主体目录-->
        <div class="m_prew_right" style="background-color: white;  position: fixed;z-index: 2;top: 100px; right: 100px; width: 280px;min-height: 200px;display: none;">
            <img src="./images/1.jpg" alt="" style=" right: 200px;width: 280px;float: left;margin-top: 20px;">
            <img src="./images/2.jpg" alt="" style=" right: 200px;width: 280px;float: left;margin-top: 20px;">

            <h3>游记目录</h3>
            <div id="wrapper" class="wrapper wrapperfiexd" tabindex="5000" style="overflow-y: hidden; outline: none;">
                <ul class="mune">
                    <li>
                        <span class="s_catalog_num">01 /</span>
                        <span class="s_text">默认目录</span>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    <!--右侧页面工具-->
    <div class="tool_bar">
        <ul>
            <li class="backBot">
                <i class="icon">
                    <a href="#floor" id="bot"><img src="./images/下载%20(2).png" alt=""></a>
                </i>
                <span class="name">页面底部</span>
            </li>
            <li class="backTop">
                <i class="icon">
                    <a href="#" id="top"><img src="./images/下载%20(3).png" alt=""></a>
                </i>
                <span class="name">返回顶部</span>
            </li>
        </ul>
    </div>
    <!--底部工具-->
    <a href="javascript:" name="floor">&nbsp;</a>
    <div id="foot"style="height: 50px;
    width: 100%;
    position: fixed;
    display: none;
    bottom: 0px;
    box-shadow:0px 0px 5px 1px #666666;
    line-height: 50px;
    background-color: rgba(255,255,255,0.7)">
    </div>
</div>
</body>
</html>